<!-- 菜品席数，菜品席数  可以修改  弹窗组件 -->
<template>
  <CustomDialog :visible="visible" @update:visible="$emit('update:visible', $event)">
    <div class="dialog-box" v-if="selectCurrentFoodData">
      <div class="title">菜品席数</div>
      <div class="description">{{ selectCurrentFoodData.name }}</div>
      <!-- 已选中的桌台 -->
      <div class="room-selected-box" v-loading="listLoading">
        <div class="room-selected-scroll-list">
          <div
            class="scroll-selected-list-item"
            v-for="(desk, index) in deskFoodRecordList"
            :key="desk.id + index"
            @click="handleSelectTable(desk)"
            :style="{
              'border-color':
                desk.is_use.value === 1 && desk?.recordInfo?.status?.value
                  ? deskOrderStatus[desk.recordInfo.status.value]
                  : deskUseStatus[desk.is_use.value]
            }"
          >
            <div
              class="title-box"
              :style="{
                background:
                  desk.is_use.value === 1 && desk?.recordInfo?.status?.value
                    ? deskOrderStatus[desk.recordInfo.status.value]
                    : deskUseStatus[desk.is_use.value]
              }"
            >
              <div class="name" v-if="desk.is_use.value === 1 && desk?.recordInfo?.status?.value">
                {{ deskStatusText[desk.recordInfo.status.value] }}
              </div>
              <div class="name" v-else>{{ desk.is_use.text }}</div>

              <div class="count">
                <span v-if="desk.hadRecordList && desk.recordInfo">
                  {{ desk.recordInfo.use_num || '0' }}</span
                >
                <span v-else>{{ desk.use_num || '0' }}</span>
                /<span>{{ desk.capacity }}人</span>
              </div>
            </div>
            <div class="desc-box">
              <div class="numberAndTag">
                <el-tooltip class="item" effect="dark" :content="desk.name" placement="top">
                  <div class="number">{{ desk.name }}</div>
                </el-tooltip>
                <div class="tag" v-if="desk?.recordInfo?.recordType">
                  {{ desk.recordInfo.recordType }}
                </div>
              </div>
            </div>
            <!-- 显示选中的图标 -->
            <img
              v-show="desk.check === 1"
              class="choose-img"
              src="@/assets/images/home/xuanzhongzhuotai.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="count-selected-box">
        <div class="total">共{{ deskFoodRecordList.length }}台</div>
      </div>
      <!-- 表单区域 -->
      <div class="form-input-box">
        <div class="form-item">
          <div class="desc">席数</div>
          <div class="dialog-input">
            <input
              class="input"
              v-model.trim="desktopKeyword"
              type="number"
              disabled
              placeholder="请输入席数"
              :min="1"
            />
          </div>
        </div>
      </div>
      <div class="button-box">
        <div class="cancel-btn" @click="onCancel" :disabled="loading">返回</div>
        <div class="confirm-btn" @click="onConfirm" :disabled="loading">
          <span v-if="loading">处理中...</span>
          <span v-else>确定</span>
        </div>
      </div>
    </div>
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import CustomDialog from '@/components/CustomDialog/Index.vue'
import { deskOrderFoodRecordList } from '@/api/desktop'
import { orderFoodDeskEdit } from '@/api/food'
import { DESK_USE_STATUS, DESK_ORDER_STATUS, DESK_STATUS_TEXT } from '@/constants/desktopStatus'

// 定义接口
interface DeskRecordInfo {
  status?: {
    value: number
  }
  recordType?: string
  use_num?: number
  open_num?: number
}

interface Desk {
  id: string
  name: string
  capacity: number
  is_use: {
    value: number
    text: string
  }
  use_num?: number
  check?: number
  hadRecordList?: boolean
  recordInfo?: DeskRecordInfo
}

interface FoodData {
  id: string
  name: string
}

// 定义props
const props = defineProps<{
  visible: boolean
  selectCurrentFoodData: FoodData | null
  currentDeskDetail: any
}>()

// 定义emits
const emit = defineEmits<{
  'update:visible': [value: boolean]
  'success': []
}>()

// 响应式数据
const deskFoodRecordList = ref<Desk[]>([])
const desktopKeyword = ref<string>('')
const selectDeskActiveList = ref<Desk[]>([])
const loading = ref<boolean>(false)
const listLoading = ref<boolean>(false)

// 桌台状态枚举
const deskUseStatus = DESK_USE_STATUS
const deskOrderStatus = DESK_ORDER_STATUS
const deskStatusText = DESK_STATUS_TEXT

// 监听弹窗显示状态
watch(() => props.visible, (val) => {
  if (val) {
    // 获取选中菜品的桌台列表
    selectDeskActiveList.value = []
    desktopKeyword.value = ''
    getDeskOrderFoodRecordList()
  }
})

// 获取选中菜品的桌台列表
const getDeskOrderFoodRecordList = async () => {
  try {
    listLoading.value = true
    const params = {
      record_id: props.currentDeskDetail.id,
      food_id: props.selectCurrentFoodData?.id
    }
    
    const res = await deskOrderFoodRecordList(params)
    if (res.status === 200) {
      const desktopArrList: Desk[] = []
      res.data.forEach((item: any) => {
        item.hadRecordList = true
        item.recordList.forEach((record: any) => {
          const recordObj = {
            recordInfo: {
              ...record
            }
          }
          const deskItem = { ...item, ...recordObj }
          desktopArrList.push(deskItem)
        })
        
        // 选中的桌台集合回显
        if (item.check === 1) {
          selectDeskActiveList.value.push(item)
        }
        desktopKeyword.value = selectDeskActiveList.value.length.toString()
      })

      deskFoodRecordList.value = desktopArrList.length > 0 ? desktopArrList : []
    }
  } catch (error) {
    ElMessage.error('获取桌台列表失败')
  } finally {
    listLoading.value = false
  }
}

// 取消事件
const onCancel = () => {
  emit('update:visible', false)
}

// 确认提交事件[修改菜品席数]
const onConfirm = async () => {
  if (!desktopKeyword.value) {
    ElMessage.warning('请输入席数')
    return
  }
  
  if (loading.value) return // 防止重复提交
  
  try {
    loading.value = true
    const deskList = selectDeskActiveList.value.map(item => item.id)
    const params = {
      // 桌台记录id
      record_id: props.currentDeskDetail.id,
      // 菜品id
      food_id: props.selectCurrentFoodData?.id,
      // 桌台id
      desk_list: deskList,
      // 数量
      num: desktopKeyword.value
    }
    
    const res = await orderFoodDeskEdit(params)
    if (res.status === 200) {
      ElMessage.success('操作成功')
      emit('update:visible', false)
      emit('success') // 触发成功事件，通知父组件刷新数据
    }
  } catch (error) {
    ElMessage.error('操作失败')
  } finally {
    loading.value = false
  }
}

// 选中对应的桌台
const handleSelectTable = (desk: Desk) => {
  const activeIndex = selectDeskActiveList.value.findIndex(item => item.id === desk.id)
  if (activeIndex === -1) {
    desk.check = 1
    selectDeskActiveList.value.push(desk)
  } else {
    desk.check = 0
    selectDeskActiveList.value.splice(activeIndex, 1)
  }
  desktopKeyword.value = selectDeskActiveList.value.length.toString()
}
</script>

<style scoped lang="scss">
.dialog-box {
  box-sizing: border-box;
}

.title {
  font-size: 20px;
  font-family: PingFang SC, PingFang SC-Bold;
  font-weight: 700;
  text-align: center;
  color: #333333;
  margin-bottom: 20px;
}

.description {
  margin-bottom: 20px;
  font-size: 18px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: center;
  color: #353535;
}

.room-selected-box {
  padding: 20px 24px 0 24px;
  box-sizing: border-box;
  height: 253px;
  width: 720px;
  overflow-y: auto;
  background: #f4f4f4;
  
  .room-selected-scroll-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    
    .scroll-selected-list-item {
      position: relative;
      width: 208px;
      height: 203px;
      background: #ffffff;
      border: 1px solid #d2d2d2;
      border-radius: 12px;
      box-sizing: border-box;
      border-top: none;
      margin-top: 20px;
      cursor: pointer;
      
      .title-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 43px;
        background: #d2d2d2;
        padding: 0 12px;
        font-size: 13px;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        color: #ffffff;
        border-radius: 12px 12px 0px 0px;
        
        .count {
          display: flex;
          align-items: center;
          
          .hall {
            margin-right: 8px;
          }
        }
      }
      
      .desc-box {
        padding: 10px 0 0 12px;
        
        .numberAndTag {
          display: flex;
          align-items: flex-start;

          .number {
            max-width: 200px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 36px;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            color: #434447;
          }

          .tag {
            display: inline-block;
            padding: 0 10px;
            height: 20px;
            line-height: 20px;
            background: #cba699;
            border-radius: 10px 10px 10px 0px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            text-align: center;
            color: #ffffff;
            margin-left: 4px;
          }
        }
      }
    }
    
    .choose-img {
      position: absolute;
      right: 12px;
      bottom: 12px;
      width: 24px;
      height: 24px;
    }
  }
  
  .room-selected-scroll-list::after {
    content: '';
    width: 208px;
  }
}

// 滚动条样式
.room-selected-box::-webkit-scrollbar {
  width: 6px !important;
  height: 0 !important;
}

.room-selected-box::-webkit-scrollbar-thumb {
  height: 100px !important;
  background: #d2d2d2 !important;
  border-radius: 3px !important;
}

.room-selected-box::-webkit-scrollbar-track {
  display: none !important;
}

.count-selected-box {
  height: 60px;
  padding-left: 20px;
  box-sizing: border-box;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  color: #333333;
}

.form-input-box {
  margin: 30px 0;
  
  .form-item {
    display: flex;
    align-items: center;
    
    .desc {
      font-size: 18px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
    }
    
    .dialog-input {
      width: 422px;
      height: 48px;
      background: #ffffff;
      border: 1px solid #d2d2d2;
      border-radius: 12px;
      box-sizing: border-box;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 30px;
      
      .input {
        width: 400px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
        outline: none;
        border: none;
      }
    }
  }
}

.button-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 52px;
  
  .cancel-btn {
    width: 120px;
    height: 52px;
    background: #ffffff;
    border: 1px solid #333333;
    border-radius: 12px;
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    line-height: 52px;
    cursor: pointer;
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
  
  .confirm-btn {
    width: 120px;
    height: 52px;
    background: #7c0a03;
    border-radius: 12px;
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #fff;
    line-height: 52px;
    margin-left: 40px;
    cursor: pointer;
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      background: #ccc;
    }
  }
}
</style>
